import React, { useState } from "react";
import useChatHistoryBox, {
  IChatHistoryBoxProps,
} from "./hooks/useChatHistoryBox";
import { useTranslation } from "react-i18next";
import styles from "./index.module.less";
import GroupSearch from "./components/GroupSearch";
import ChatGroupItem from "./components/ChatGroupItem";
import BGEmpty from "@/pages/BigScreen/components/BGEmpty";
import { Spin } from "antd";

function History(props: IChatHistoryBoxProps) {
  const { handlePopupVisible } = props;
  const inst = useChatHistoryBox(props);
  const { t } = useTranslation();

  const [delVisible, setDelVisible] = useState(false);
  const [dialogDetailInfo, setDialogDetailInfo] = useState<any>({});

  const toDelateSession = () => {
    setDelVisible(false);
    inst.onHandleChangeTalk("del", dialogDetailInfo);
  };

  const handleChangeSession = (item) => {
    inst.changeSession(item);

    handlePopupVisible(false);
  };
  return (
    <>
      <div className={styles["search"]}>
        <GroupSearch
          value={inst.searchGroup}
          placeholder="请输入"
          onChange={(e) => {
            inst.setSearchGroup(e.target.value);
          }}
        />
      </div>

      <div className={styles["content"]}>
        <Spin spinning={inst.isLoading}>
          {inst.talkFilterLists.map((item) => (
            <ChatGroupItem
              key={item.id}
              info={item}
              selectTalk={inst.selectTalk}
              selected={inst.selectTalk?.id === item.id}
              onHandleChangeTalk={inst.onHandleChangeTalk}
              handleChangeSession={handleChangeSession}
              currentTask={inst.currentTask}
              updateSession={inst.updateSession}
              setCurrentTask={inst.setCurrentTask}
            ></ChatGroupItem>
          ))}

          {inst.talkFilterLists.length === 0 && <BGEmpty></BGEmpty>}
        </Spin>
      </div>
    </>
  );
}

export default History;
